<template>
	<view class="content">
		<view class="hz">
			<view class="area1">
				<view class="addr">
					<view class="flag"></view>
					<view class="info">
						<view class="info1">
							<text>{{deliverGoods.startaddr}}</text>
						</view>
						<view class="info2">
							<text class="text1">{{deliverGoods.contacts1}}</text>
							<text class="text2">{{deliverGoods.mobile1}}</text>
						</view>
					</view>
					<view class="jt">
						<text>></text>
					</view>
				</view>
				<view v-if="false" class="tjd">
					<text>+途经点</text>
				</view>
				<view class="addr">
					<view class="flag flag2"></view>
					<view class="info">
						<view class="info1">
							<text>{{deliverGoods.endaddr}}</text>
						</view>
						<view class="info2">
							<text class="text1">{{deliverGoods.contacts2}}</text>
							<text class="text2">{{deliverGoods.mobile2}}</text>
						</view>
					</view>
					<view class="jt">
						<text>></text>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view  class="hz2">
				<view  v-if="false" class="cx"  v-for="(item,index) in list">
					<view class="left">
						<image src="/static/order/cx.png" mode="heightFix"></image>
						<text class="text1">{{item.name}}</text>
						<view class="qh">
							<image src="/static/order/jh.png" mode="widthFix"></image>
							<text>切换</text>
						</view>
					</view>
					<view class="right">
						<text class="text1">{{item.start_price}}</text>
						<text class="text2">元</text>
						<image src="/static/order/xz.png" mode="widthFix" @tap="qxItem()"></image>
					</view>
				</view>
				<!-- 更多车型 -->
				<view class="gdcx">
					<view class="title">
						<text>车型</text>
					</view>
					<view class="item" @click="deliverGoods.type_id = item.id"  v-for="(item,index) in list">
						<view class="left">
							<image src="/static/order/cx.png" mode="heightFix"></image>
							<text class="text1">{{item.name}}</text>
						</view>
						<view class="right">
							<text class="text1">{{price}}</text>
							<text class="text2">元</text>
							<image v-if="item.id!==deliverGoods.type_id" src="/static/order/wxz.png" mode="widthFix" @tap="xzItem(item)"></image>
							<image v-if="item.id===deliverGoods.type_id" src="/static/order/xz.png" mode="widthFix" @tap="xzItem(item)"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="more">
				<view class="item">
					<view class="left">
						<text>用车时间</text>
					</view>
					<view class="right" @tap="show=true">
						<text class="text1">{{deliverGoods.yytime}}</text>
						<text class="text2">></text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text>支付</text>
					</view>
					<view class="right">
						<text class="text1">个人支付(线上支付)</text>
						<text class="text2">></text>
					</view>
				</view>
				<view class="item last-item">
					<view class="left">
						<text>备注与服务</text>
					</view>
					<view class="right">
						<input v-model="deliverGoods.remark" placeholder="备注" />
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<view class="left">
				<text class="text1">已选择</text>
				<text class="text2">{{price}}</text>
				<text class="text3">元</text>
			</view>
			<view class="right">
				<view class="btn" @tap="add()">立即呼叫</view>
			</view>
		</view>
		
		<!-- 预约时间 -->
		<u-datetime-picker
        :value="deliverGoods.yytime"
		    :show="show"
		    mode="datetime"

			@cancel="show=false"
			@close="show=false"
			@confirm="qrYytime"
			:closeOnClickOverlay="true"
		></u-datetime-picker>
	</view>
</template>

<script>
	import { timestampToTime2 } from'@/common/utils.js'
import { stringify } from 'querystring'
  import request from "../../common/request";
	export default {
		data() {
			return {
				//参数
				params: {},
				list: [],
				//预约时间
				show: false,
				value1: Number(new Date()),
				//备注
				remark: '',
        price:0,
			}
		},
		onLoad(option) {
			this.getCar()
      this.getPrice();
		},
    computed:{
      deliverGoods(){
        return this.$store.state.deliverGoods;
      }
    },
		methods: {
      getPrice(){
        request({
          url:'/d/car/getPrice',
          data:{
            distance:this.deliverGoods.distance
          },
          method:'post'
        }).then(res=>{
          this.price = res.data.price;
        })
      },
			//获取车辆
			async getCar(){
				let data = await request({
          url: '/d/car/typeList',
						isAuth: false,
				});
				this.list = data.data
			},
			
			//确认预约时间
			qrYytime(e){
				let time = timestampToTime2(e.value)
        console.log(time)
				this.deliverGoods.yytime = time
				this.show = false
			},
			
			//取消选择
			qxItem(){
				this.params.carId = ''
				this.params.startPrice = 0
			},
			
			//选择某个
			xzItem(item){
				this.params.carId = item.id
				this.params.startPrice = item.start_price
			},
			
			//下单
			async add(){
        console.log(this.deliverGoods)
				//验参
				let data = await this.$request({
						url: '/d/order/add',
						method: 'POST',
						data: this.deliverGoods
				});
				//提示
				uni.showToast({
					icon:"success",
					title:"呼叫成功"
				})
        setTimeout(()=>{
          uni.navigateBack();
        },1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.hz{
			width: 100%;
			height: 500rpx;
			background-image: linear-gradient(to bottom, #6A46D2, #fff);
			.area1{
				padding: 50rpx 20rpx 0;
				display: flex;
				justify-content: space-between;
				color: #fff;
				.addr{
					display: flex;
					line-height: 40rpx;
					width: 260rpx;
					.flag{
						margin-top: 12rpx;
						width: 15rpx;
						height: 15rpx;
						border-radius: 50%;
						background-color: #05AA5A;
					}
					.flag2{
						background-color: #FF4850;
					}
					.info{
						margin-left: 5rpx;
						.info1{
							font-weight: bold;
						}
						.info2{
							color: #fff;
							font-size: $uni-font-size-sm;
							.text1{
								
							}
							.text2{
								margin-left: 20rpx;
							}
						}
					}
					.jt{
						margin-left: 10rpx;
						line-height: 80rpx;
					}
				}
				.tjd{
					width: 130rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 30rpx;
					text-align: center;
					background-color: #8861FF;
					color: #fff;
					font-size: $uni-font-size-sm;
					font-weight: bold;
				}
			}
		}
		.main{
			position: relative;
			margin: -300rpx 20rpx;
			padding-bottom: 250rpx;
			.hz2{
				background-color: #fff;
				border-radius: 20rpx;
				padding: 30rpx 20rpx 0;
				.cx{
					display: flex;
					padding: 30rpx 20rpx;
					background-color: #F2F5FF;
					border-radius: 20rpx;
					line-height: 50rpx;
					.left{
						display: flex;
						image{
							height: 50rpx;
						}
						.text1{
							margin-left: 15rpx;
							font-size: $uni-font-size-lg;
							font-weight: bold;
						}
						.qh{
							margin-top: 5rpx;
							margin-left: 10rpx;
							width: 80rpx;
							height: 40rpx;
							line-height: 40rpx;
							border-radius: 20rpx;
							background-color: #EAEEFD;
							font-size: $uni-font-size-sm;
							text-align: center;
							image{
								width: 20rpx;
							}
						}
					}
					.right{
						margin-left: auto;
						display: flex;
						.text1{
							font-size: $uni-font-size-lg;
							font-weight: bold;
						}
						.text2{
							font-size: $uni-font-size-sm;
						}
						image{
							margin-left: 20rpx;
							width: 40rpx;
						}
					}
				}
				.gdcx{
					margin-top: 40rpx;
					.title{
						padding-left: 20rpx;
						line-height: 40rpx;
						font-size: $uni-font-size-lg;
						font-weight: bold;
					}
					.item{
						display: flex;
						padding: 40rpx 20rpx;
						line-height: 50rpx;
						.left{
							display: flex;
							image{
								height: 50rpx;
							}
							.text1{
								margin-left: 15rpx;
								font-size: $uni-font-size-lg;
								font-weight: bold;
							}
						}
						.right{
							margin-left: auto;
							display: flex;
							.text1{
								font-size: $uni-font-size-lg;
								font-weight: bold;
							}
							.text2{
								font-size: $uni-font-size-sm;
							}
							image{
								margin-left: 20rpx;
								width: 40rpx;
							}
						}
					}
				}
			}
			.more{
				margin-top: 20rpx;
				padding: 0 20rpx;
				background-color: #fff;
				border-radius: 20rpx;
				.item{
					padding: 40rpx 30rpx;
					border-bottom: 1rpx solid #F6F6F6;
					display: flex;
					.left{
						font-weight: bold;
					}
					.right{
						margin-left: auto;
						color: #929292;
						.text1{}
						.text2{
							margin-left: 15rpx;
						}
						input{
							text-align: right;
						}
					}
				}
				.last-item{
					border-bottom: none;
				}
			}
		}
		//底部
		.bottom{
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 3;
			display: flex;
			padding: 20rpx 10rpx 60rpx;
			width: 730rpx;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #fff;
			.left{
				.text1{}
				.text2{
					margin-left: 10rpx;
					font-size: 20px;
					font-weight: bold;
					color: #FF4648;
				}
				.text3{}
			}
			.right{
				margin-left: auto;
				.btn{
					width: 380rpx;
					height: 100rpx;
					text-align: center;
					font-size: $uni-font-size-lg;
					font-weight: bold;
					color: #fff;
					background-color: #895FFF;
					border-radius: 20rpx;
					letter-spacing: 1rpx;
				}
			}
		}
	}
</style>
<style>
	page{
		background-color: #F6F6F6;
	}
</style>
